<template>
  <div class="login">
    <div>
      <span class="mui-icon mui-icon-person"></span>
    </div>
    <form class="mui-input-group">
      <div class="mui-input-row">
        <label>账号</label>
        <input type="text" class="mui-input-clear" placeholder="请输入用户名" ref="user">
      </div>
      <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码" ref="pwd">
      </div>
      <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" @click="get">确认</button>
        <button type="button" class="mui-btn mui-btn-danger" @click="clear">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  methods: {
    clear() {
      this.$refs.user.value = '';
      this.$refs.pwd.value = '';
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  .mui-icon {
    position: relative;
    margin: 50px auto;
    left: 30%;
    font-size: 10em;
    color: #666;
    border: 5px solid #666;
    border-radius: 50%;
    opacity: .6;
  }

  .mui-input-group {
    position: relative;
    left: 10%;
    height: 500px;
    width: 80%;
    
    .mui-input-row {
      height: 10%;
      
      label {
        padding-left: 40px;
        text-align: center;
        line-height: 1.5;
      }
      input {
        padding-top: 20px;
        padding-left: 40px;
        line-height: 1.5;
      }
    }
    .mui-button-row {
      button {
        margin-top: 10%;
        left: -10%;
        margin-left: 50px;
      }
      button+button {
        margin-left: 80px;
      }
      :before {
        left: 1px;
      }
    }
  }
}
</style>
